<template>
  <div class="container">
    <h2>name: {{ name }} age: {{ age }}</h2>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    const obj = reactive({
      name: 'ifer',
      age: 10,
      address: '河南',
      sex: '男',
    })
    // !从 reactive 数据中进行解构简单数据类型，会使这个数据丢失响应式
    // 原因：解构出来这个简单数据脱离了原来的响应式环境，变成了普普通通的一个数据了
    let { name, age } = obj
    const updateName = () => {
      name = 'xxx'
      console.log(1)
    }
    // 问题 1：模板中都要使用 obj. 进行获取数据，麻烦。
    // 问题 2：明明模板中只用到了 name 和 age，却把整个 obj 进行了导出，没必要，性能浪费。
    return { name, age, updateName }
  },
}
</script>